<template>
    <el-tabs tab-position="left">
        <el-tab-pane label="分值计算">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="item" label="分值项" />
                <el-table-column prop="remark" label="分值说明" />
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="社会影响系数">
            <el-card shadow="always">
                <el-form :model="queryParams" :inline="true" label-width="100px">
                    <el-form-item label="覆盖场景" prop="coverageScene">
                        <el-input v-model="queryParams.coverageScene" placeholder="请输入覆盖场景" clearable
                            style="width: 240px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="listSceneInfluenceList">查询</el-button>
                        <el-button @click="unsetQueryForm"><el-icon>
                                <RefreshRight />
                            </el-icon>重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="always" style="margin-top: 10px;">
                <el-row>
                    <el-button type="primary" icon="Plus" @click="showAddSceneInfluence">新增</el-button>
                </el-row>
                <el-table :data="coefficientTable" style="width: 100%;;margin-top: 5px;" height="calc(100vh - 300px)">
                    <el-table-column prop="id" label="ID" align="center" />
                    <el-table-column prop="coverageScene" label="覆盖场景" align="center" />
                    <el-table-column prop="influenceCoefficient" label="社会影响系数" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="250" align="center">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-tab-pane>

    </el-tabs>

    <el-dialog v-model="addDialogVisible" title="新增社会影响系数" width="600" @closed="closeAddDialog">
        <el-form :inline="true" :model="addForm" label-width="200px" :rules="addRules" ref="addRef">
            <el-form-item label="覆盖场景" prop="coverageScene">
                <el-input v-model="addForm.coverageScene" style="width: 240px" />
            </el-form-item>
            <el-form-item label="社会影响系数" prop="influenceCoefficient">
                <el-input-number v-model="addForm.influenceCoefficient" :precision="1" :step="0.1" :max="3"
                    style="width: 240px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="doAddSceneInfluence">
                    确定
                </el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>

    <el-dialog v-model="editDialogVisible" title="修改社会影响系数" width="600" @closed="closeEditDialog">
        <el-form :inline="true" :model="editForm" label-width="200px" :rules="addRules" ref="editRef">
            <el-form-item label="ID" prop="id">
                <el-input v-model="editForm.id" style="width: 240px" readonly />
            </el-form-item>
            <el-form-item label="覆盖场景" prop="coverageScene">
                <el-input v-model="editForm.coverageScene" style="width: 240px" />
            </el-form-item>
            <el-form-item label="社会影响系数" prop="influenceCoefficient">
                <el-input-number v-model="editForm.influenceCoefficient" :precision="1" :step="0.1" :max="3"
                    style="width: 240px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="doEditSceneInfluence">
                    确定
                </el-button>
                <el-button @click="editDialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
// core
import { ref } from "vue";

import { querySceneInfluenceList, addSceneInfluence, deleteSceneInfluence, updateSceneInfluence } from "@/api/biz/networkProfit";
import { ElMessage } from 'element-plus'

const coefficientTable = ref([])
const queryParams = ref({})
const addDialogVisible = ref(false)
const addForm = ref({})
const { proxy } = getCurrentInstance();
const editDialogVisible = ref(false)
const editForm = ref({})

const addRules = {
    coverageScene: [{ required: true, trigger: "blur", message: "请输入覆盖场景" }],
    influenceCoefficient: [{ required: true, trigger: "blur", message: "请输入社会影响系数" }],
};

const tableData = ref([
    { item: '总分', remark: '70%(基准值：固定值) + 30%（浮动值：综合价值）' },
    { item: '综合价值', remark: '经济价值 * 社会影响系数' },
    { item: '经济价值', remark: '流量*分档单价（根据ARPU分档）' }
])

function listSceneInfluenceList() {
    let param = {}
    param.coverageScene = queryParams.value.coverageScene
    querySceneInfluenceList(param).then(res => {
        coefficientTable.value = res.data
    })
}

function unsetQueryForm() {
    queryParams.value = {
    }
}

function showAddSceneInfluence() {
    addDialogVisible.value = true
}

function doAddSceneInfluence() {
    proxy.$refs.addRef.validate(valid => {
        if (valid) {
            let param = {
                coverageScene: addForm.value.coverageScene,
                influenceCoefficient: addForm.value.influenceCoefficient
            }
            addSceneInfluence(param).then(res => {
                ElMessage.success('新增成功！')
                addDialogVisible.value = false
                listSceneInfluenceList()
            })
        }
    })
}

function closeAddDialog() {
    addForm.value = {}
    addDialogVisible.value = false
}

function closeEditDialog() {
    editDialogVisible.value = false
    editForm.value = {}
}


function handleDelete(row) {
    let param = {
        id: row.id
    }
    proxy.$modal.confirm('是否确认删除ID为"' + row.id + '"的数据项？').then(function () {
        return deleteSceneInfluence(param);
    }).then(() => {
        listSceneInfluenceList()
        ElMessage.success('操作成功！')
    }).catch(() => { });
}

function handleEdit(row) {
    editDialogVisible.value = true
    editForm.value = row
}

function doEditSceneInfluence() {
    proxy.$refs.editRef.validate(valid => {
        if (valid) {
            let param = {
                id: editForm.value.id,
                coverageScene: editForm.value.coverageScene,
                influenceCoefficient: editForm.value.influenceCoefficient
            }
            updateSceneInfluence(param).then(res => {
                ElMessage.success('修改成功！')
                editDialogVisible.value = false
                listSceneInfluenceList()
            })
        }
    })
}



listSceneInfluenceList()

</script>
